<template>
  <view>
    <nav-bar title="搜索技师"></nav-bar>
    <search placeholder="请输入技师名称" :value="keyword" @search="search"></search>
    <scroll-view scroll-y :style="{ height: mainHeight }" class="contain">
      <technician-list
        v-if="technicianList.length > 0"
        :technicianList="technicianList"
        :showButton="false"
        :showPreserve="true"
        @imageClick="imageClick"
        @toDetail="toMasterDetail"
      ></technician-list>
      <view v-else class="bo-data">
        <image class="img" :src="baseImgUrl + 'img_no_address.png'" alt="" />
        <view>暂无搜索结果</view>
        <view>请换个关键词试试吧~</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from "../../components/nav-bar";
import Search from '../../components/search/index'
import TechnicianList from '@/subPages/components/technicianList'
import api_technician from '@/api/technician.js'
import pageConfig from '@/config'
export default {
  name: "technicianSearch",
  components: { NavBar, Search, TechnicianList },
  data() {
    return {
      baseImgUrl: pageConfig.baseImgUrl,
      mainHeight: '',
      keyword: '',
      obj: {},
      technicianList: [],
    };
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabSearchHeight;
  },
  onLoad(options) {
    if ('params' in options) {
      this.obj = JSON.parse(decodeURIComponent(options.params));
    }
  },
  methods: {
    // toDetail() {
    //   uni.navigateTo({
    //     url: '/subPages/home/shopDetail'
    //   })
    // },
    search(value) {
      const params = {
        ...this.obj,
        technicianName : value,
		state: 1,
		minProIsShow: 1
      }
      api_technician.fetchTechnicianList(params).then((res) => {
        if (res.data.length > 0) {
          // res.data.forEach((item) => {
          //   item.images = item.images.split(",")[0]
          // })
          this.technicianList = res.data
        } else {
          this.technicianList = []
        }
      })
    },
    toMasterDetail(item) {
      uni.navigateTo({
        url: `/subPages/technician/technicianDetail?id=${item.technician.id}`,
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.city {
  color: rgba(255, 255, 255, 1);
  display: flex;
  margin-right: 20rpx;
  transform: translateY(15rpx);
}

.contain {
  background-color: #fff;
  border-radius: 24rpx 24rpx 0 0;
  width: 100%;
  padding-top: 25rpx;
  margin-top: 40rpx;

  .bo-data {
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
    font-size: 30rpx;
    font-weight: 400;
    letter-spacing: 0rpx;
    line-height: 43.44rpx;
    color: rgba(51, 51, 51, 1);
    text-align: justify;
    vertical-align: top;

    img {
      width: 80%;
      height: 500rpx;
    }

  }
}
</style>